  <template>
    <div class="container">

      <Head v-if="isShow" />
      <router-view></router-view>
      <Foot v-if="isShow" />
      <div >
        <router-link to="/chatBot"><Ai v-if="isShow" /></router-link>
      </div>
      <div>
        <router-link to="/shoppingcart"><Shopping v-if="isShow" /></router-link>
      </div>
    </div>
  </template> 

<script setup>
import Head from '@/components/Head.vue';
import Foot from '@/components/Foot.vue';
import Ai from '@/components/Ai.vue';
import Shopping from '@/components/Shopping.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue'

const isShow = ref(true)
const router = useRouter()
// 某些页面是不需要 head 
const whiteList = ['/login','/chatBot','/shoppingcart'];
router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.path)) {
    isShow.value = false;
    next();
  } else {
    isShow.value = true;
    next();
  }
})
</script>

<style lang="css" scoped>
.container {
  min-height: 100vh;
  position: relative;
}

.content {
  padding: 0 16px 0 16px;
}
</style>